<template>
	<div class="main">
		<el-container>
			<el-header>
				<el-row>
					<el-col :span="2"><div class="grid-content bg-purple">logo区域</div></el-col>
					<el-col :span="18"><div class="grid-content bg-purple"></div></el-col>
					<el-col :span="2">
						<div class="grid-content bg-purple-light">
							<el-dropdown trigger="click" class="header_select" @command="handleCommand">
								<span class="el-dropdown-link">
									{{ username }}
									<i class="el-icon-setting el-icon--right"></i>
								</span>
								<el-dropdown-menu slot="dropdown" class="header_select">
									<el-dropdown-item icon="el-icon-plus" command="a">黄金糕</el-dropdown-item>
									<el-dropdown-item icon="el-icon-circle-plus" command="b">狮子头</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</el-col>
				</el-row>
			</el-header>
			<el-container>
				<el-aside width="auto">
					<el-menu default-active="1-4-1" class="el-menu-vertical-demo">
						<el-submenu index="1">
							<template slot="title">
								<i class="el-icon-location"></i>
								<span slot="title">导航一</span>
							</template>
							<el-menu-item-group>
								<span slot="title">分组一</span>
								<el-menu-item index="1-1">选项1</el-menu-item>
								<el-menu-item index="1-2">选项2</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group>
							<el-submenu index="1-4">
								<span slot="title">选项4</span>
								<el-menu-item index="1-4-1">选项1</el-menu-item>
							</el-submenu>
						</el-submenu>
						<el-menu-item index="2">
							<i class="el-icon-menu"></i>
							<span slot="title">导航二</span>
						</el-menu-item>
						<el-menu-item index="3" disabled>
							<i class="el-icon-document"></i>
							<span slot="title">导航三</span>
						</el-menu-item>
						<el-menu-item index="4">
							<i class="el-icon-setting"></i>
							<span slot="title">导航四</span>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<el-container>
					<el-main class="right_show_div">
						<el-container>
							<div style="margin-bottom: 20px;"><el-button size="small" @click="addTab(editableTabsValue)">add tab</el-button></div>
							<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
								<el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
									{{ item.content }}
								</el-tab-pane>
							</el-tabs>
						</el-container>
					</el-main>
					<el-footer style="height: 50px;">底部</el-footer>
				</el-container>
			</el-container>
		</el-container>
	</div>
</template>

<script>
export default {
	name: 'Menu',
	props: {
		msg: String
	},
	methods: {
		handleCommand(command) {
			this.$message('click on item ' + command);
		},
		addTab(targetName) {
			let newTabName = ++this.tabIndex + '';
			this.editableTabs.push({
				title: 'New Tab',
				name: newTabName,
				content: 'New Tab content'
			});
			this.editableTabsValue = newTabName;
		},
		removeTab(targetName) {
			let tabs = this.editableTabs;
			let activeName = this.editableTabsValue;
			if (activeName === targetName) {
				tabs.forEach((tab, index) => {
					if (tab.name === targetName) {
						let nextTab = tabs[index + 1] || tabs[index - 1];
						if (nextTab) {
							activeName = nextTab.name;
						}
					}
				});
			}

			this.editableTabsValue = activeName;
			this.editableTabs = tabs.filter(tab => tab.name !== targetName);
		}
	},
	data() {
		const item = {
			date: '2016-05-02',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1518 弄'
		};
		return {
			tableData: Array(20).fill(item),
			activeIndex: '1',
			username: '张三',
			editableTabsValue: '2',
			editableTabs: [
				{
					title: 'Tab 1',
					name: '1',
					content: 'Tab 1 content'
				},
				{
					title: 'Tab 2',
					name: '2',
					content: 'Tab 2 content'
				}
			],
			tabIndex: 2
		};
	}
};
</script>

<style scoped>
.main {
	top: 0;
	height: 100%;
}
/* 头部样式 */
.el-header {
	background-color: #409eff;
	color: #333;
	text-align: center;
	line-height: 60px;
}
/* 左侧样式 */
.el-aside {
	background-color: white;
	color: #333;
	text-align: center;
	/* line-height: 200px; */
}
/* 主要显示区样式 */
.el-main {
	background-color: white;
	color: #333;
	text-align: center;
	/* line-height: 160px; */
}
/* 底部样式 */
.el-footer {
	background-color: #909399;
	color: #333;
	text-align: center;
	line-height: 50px;
}
body > .el-container {
	margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
	line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
	line-height: 320px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 200px;
	min-height: 400px;
}
.el-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}
.el-col {
	border-radius: 4px;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
}
.row-bg {
	padding: 10px 0;
}

/* 头部用户账号下拉先择框的样式 */
.header_select {
	width: 200px;
	/* background-color: #409eff; */
	color: black;
	font-size: 1.25rem;
}
.el-dropdown-link {
	cursor: pointer;
}
/* 右边显示区 */
.right_show_div {
	height: 51rem;
}
</style>
